<!--
 * @Author: zhangmengqiong
 * @Date: 2021-05-11 10:21:42
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-05-11 15:16:18
-->
<template>
  <common-card title="累计用户数" value="1,087,503">
    <template>
      <v-chart :option="initChartOption()" />
    </template>
    <template v-slot:footer>
      <div class="tatal-users-footer">
        <span>日同比 </span>
        <span class="emphasis">8.73%</span>
        <span class="increase"></span>
        <span class="month">月同比 </span>
        <span class="emphasis">35.91%</span>
        <span class="decrease"></span>
      </div>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from "@/mixins/commonCardMixin";
export default {
  mixins: [commonCardMixin],
  mounted() {},
  methods: {
    initChartOption() {
      let option = {
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "value",
          boundaryGap: false,
          show: false // 不展示x轴
        },
        yAxis: {
          type: "category",
          show: false // 不展示y轴
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        series: [
          // 两条线合并
          {
            data: [120],
            type: "bar",
            barWidth: 12,
            stack: "总量", // 相同数据进行合并，图表重叠
            smooth: true,
            itemStyle: {
              color: "#45c946"
            }
          },
          {
            data: [200],
            type: "bar",
            stack: "总量",
            itemStyle: {
              color: "#eee"
            }
          },
          {
            type: "custom", // 自定义三角
            data: [120],
            stack: "总量",
            renderItem: (params, api) => {
              const value = api.value(0);
              // 取出点的坐标系
              const endPoint = api.coord([value, 0]);
              return {
                type: "group",
                children: [
                  {
                    type: "path",
                    position: endPoint,
                    shape: {
                      d:
                        "M234.88884163 377.47806845l279.65492248 279.65492248 278.8075161-278.8075161z",
                      x: -5,
                      y: -20,
                      width: 10,
                      height: 10,
                      layout: "cover" // 填充
                    },
                    style: {
                      fill: "#45c946"
                    }
                  },
                  {
                    type: "path",
                    position: endPoint,
                    shape: {
                      d:
                        "M870.73079499 686.14387737l-362.02410036-362.02410034-360.92762642 360.92762644Z",
                      x: -5,
                      y: 10,
                      width: 10,
                      height: 10,
                      layout: "cover" // 填充
                    },
                    style: {
                      fill: "#45c946"
                    }
                  }
                ]
              };
            }
          }
        ]
      };
      return option;
    }
  }
};
</script>
<style lang="scss" scoped>
.tatal-users-footer {
  display: flex;
  align-items: center;
  .month {
    margin-left: 10px;
  }
}
</style>
